<template>
  <div class="formPage">
    <div class="title">页面装修</div>
    <!-- <div class="setType">
      <div @click="setType = 1" :class="setType == 1 ? 'active' : ''">
        基础设置
      </div>
      <div @click="setType = 2" :class="setType == 2 ? 'active' : ''">
        高级设置
      </div>
    </div> -->
    <a-tabs :default-active-key="setType" style="margin-top: 20px">
      <a-tab-pane :key="1" tab="基础设置">
        <div class="textTitle">选择模板</div>
        <div class="styleType">
          <div
            @click="pageJson.styleType = 1"
            :class="pageJson.styleType == 1 ? 'active' : ''"
          >
            系统样式
          </div>
          <div
            @click="pageJson.styleType = 2"
            :class="pageJson.styleType == 2 ? 'active' : ''"
          >
            自定义
          </div>
        </div>

        <div class="editor">
          <a-collapse expandIconPosition="right">
            <a-collapse-panel header="背景样式" v-if="pageJson.styleType == 2">
              <div class="flex">
                <div
                  v-if="pageJson.bannerType == 1"
                  class="blankUpbox"
                  :style="{
                    background: `url(${require('@/assets/images/product/choujiang_bg.png')})
                      no-repeat top center / cover`,
                  }"
                ></div>
                <div v-else>
                  <div
                    v-if="pageJson.bannerImageUrl"
                    @click="
                      !readOnly ? openUpload('image', pageJson, 'banner') : look
                    "
                    class="upload_wrap"
                    :style="{
                      background: `url(${pageJson.bannerImageUrl}) no-repeat 50% 50%/cover`,
                    }"
                  >
                    <p class="updateImg">更换图片</p>
                  </div>
                  <div
                    v-else
                    class="upload_wrap uploadBox"
                    @click="
                      !readOnly ? openUpload('image', pageJson, 'banner') : look
                    "
                  >
                    <a-icon type="plus" />
                    <p>上传图片</p>
                  </div>
                </div>
                <div class="grow">
                  <a-radio-group
                    v-model="pageJson.bannerType"
                    :disabled="readOnly"
                  >
                    <a-radio :style="radioStyle" :value="1"> 系统默认 </a-radio>
                    <a-radio
                      :style="[
                        radioStyle,
                        {
                          position: 'relative',
                        },
                      ]"
                      :value="2"
                    >
                      自定义
                      <div class="radiotext">建议宽度750px，高度大于1765px</div>
                    </a-radio>
                  </a-radio-group>
                </div>
              </div>
            </a-collapse-panel>
            <a-collapse-panel header="悬浮按钮">
              <div class="flex">
                <span>分享按钮</span>
                <div>
                  <a-radio-group
                    name="radioGroup"
                    :disabled="readOnly"
                    v-model="pageJson.shareBtnshow"
                  >
                    <a-radio :value="1"> 展示 </a-radio>
                    <a-radio :value="0"> 隐藏 </a-radio>
                  </a-radio-group>
                </div>
              </div>
              <div
                class="flex pad15 mt10"
                v-if="pageJson.shareBtnshow && pageJson.styleType == 2"
              >
                <div
                  v-if="pageJson.sharebtnType == 1"
                  class="blankUpbox"
                  :style="{
                    background: `url(${require('@/assets/images/product/choujing_icon_gaosuhaoyou.png')})
                      no-repeat center center / cover`,
                  }"
                ></div>
                <div v-else>
                  <div
                    v-if="pageJson.shareImageUrl"
                    @click="
                      !readOnly
                        ? openUpload('image', pageJson, 'shareBtn')
                        : look
                    "
                    class="upload_wrap"
                    :style="{
                      background: `url(${pageJson.shareImageUrl}) no-repeat 50% 50%/cover`,
                    }"
                  >
                    <p class="updateImg">更换图片</p>
                  </div>
                  <div
                    v-else
                    class="upload_wrap uploadBox"
                    @click="
                      !readOnly
                        ? openUpload('image', pageJson, 'shareBtn')
                        : look
                    "
                  >
                    <a-icon type="plus" />
                    <p>上传图片</p>
                  </div>
                </div>
                <div class="grow">
                  <a-radio-group
                    v-model="pageJson.sharebtnType"
                    :disabled="readOnly"
                  >
                    <a-radio :style="radioStyle" :value="1"> 系统默认 </a-radio>
                    <a-radio
                      :style="[
                        radioStyle,
                        {
                          position: 'relative',
                        },
                      ]"
                      :value="2"
                    >
                      自定义
                      <div class="radiotext">建议宽度100px，高度100px</div>
                    </a-radio>
                  </a-radio-group>
                </div>
              </div>

              <div class="flex mt10" v-if="pageJson.shareBtnshow">
                <span>文案</span>
                <div class="right posi">
                  <a-input
                    v-model="pageJson.shareBtnText"
                    :disabled="readOnly"
                    placeholder="输入1-5字"
                    :max-length="5"
                  />
                  <span class="limit"
                    >{{ pageJson.shareBtnText.length || 0 }}/5</span
                  >
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.shareBtnshow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体颜色</span>
                  <span class="value">{{ pageJson.shareBtnColor }}</span>
                </div>
                <div class="input color">
                  <span
                    class="input-btn"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'shareBtnColor', '#ffffff')
                        : look
                    "
                    >重置</span
                  >
                  <a-input
                    type="color"
                    v-model="pageJson.shareBtnColor"
                    :disabled="readOnly"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.shareBtnshow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体大小</span>
                </div>
                <div class="input grow">
                  <a-slider
                    class="slider"
                    v-model="pageJson.sharefontSize"
                    :min="8"
                    :max="16"
                    :disabled="readOnly"
                    style="width: 120px"
                  />
                  <a-input-number
                    v-model="pageJson.sharefontSize"
                    :min="8"
                    :max="16"
                    :disabled="readOnly"
                    style="margin-left: 16px; width: 60px"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.shareBtnshow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体粗细</span>
                  <span class="value">{{
                    pageJson.sharefontWeight | textThicknessFilter
                  }}</span>
                </div>
                <div class="input">
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.sharefontWeight == 'normal'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'sharefontWeight', 'normal')
                        : look
                    "
                  >
                    <i class="iconfont icon-icon_right_attributebar_zz_r"></i>
                  </div>
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.sharefontWeight == 'bold'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'sharefontWeight', 'bold')
                        : look
                    "
                  >
                    <i class="iconfont icon-icon_right_attributebar_zz_b"></i>
                  </div>
                </div>
              </div>
              <a-divider />

              <div class="flex mt10">
                <span>进入店铺</span>
                <div>
                  <a-radio-group
                    name="radioGroup"
                    v-model="pageJson.goShopBtnShow"
                    :disabled="readOnly"
                  >
                    <a-radio :value="1"> 展示 </a-radio>
                    <a-radio :value="0"> 隐藏 </a-radio>
                  </a-radio-group>
                </div>
              </div>
              <div
                class="flex pad15 mt10"
                v-if="pageJson.goShopBtnShow && pageJson.styleType == 2"
              >
                <div
                  v-if="pageJson.goShopbtnType == 1"
                  class="blankUpbox"
                  :style="{
                    background: `url(${require('@/assets/images/product/choujing_icon_jindianguanguang.png')})
                      no-repeat center center / cover`,
                  }"
                ></div>
                <div v-else>
                  <div
                    v-if="pageJson.goShopImageUrl"
                    @click="
                      !readOnly ? openUpload('image', pageJson, 'goshop') : look
                    "
                    class="upload_wrap"
                    :style="{
                      background: `url(${pageJson.goShopImageUrl}) no-repeat 50% 50%/cover`,
                    }"
                  >
                    <p class="updateImg">更换图片</p>
                  </div>
                  <div
                    v-else
                    class="upload_wrap uploadBox"
                    @click="
                      !readOnly ? openUpload('image', pageJson, 'goshop') : look
                    "
                  >
                    <a-icon type="plus" />
                    <p>上传图片</p>
                  </div>
                </div>
                <div class="grow">
                  <a-radio-group
                    v-model="pageJson.goShopbtnType"
                    :disabled="readOnly"
                  >
                    <a-radio :style="radioStyle" :value="1"> 系统默认 </a-radio>
                    <a-radio
                      :style="[
                        radioStyle,
                        {
                          position: 'relative',
                        },
                      ]"
                      :value="2"
                    >
                      自定义
                      <div class="radiotext">建议宽度100px，高度100px</div>
                    </a-radio>
                  </a-radio-group>
                </div>
              </div>

              <div class="flex mt10" v-if="pageJson.goShopBtnShow">
                <span>文案</span>
                <div class="right posi">
                  <a-input
                    v-model="pageJson.goShopBtnText"
                    placeholder="输入1-5字"
                    :max-length="5"
                    :disabled="readOnly"
                  />
                  <span class="limit"
                    >{{ pageJson.goShopBtnText.length || 0 }}/5</span
                  >
                </div>
              </div>

              <div
                class="flex mt10"
                v-if="pageJson.goShopBtnShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体颜色</span>
                  <span class="value">{{ pageJson.goShopBtnColor }}</span>
                </div>
                <div class="input color">
                  <span
                    class="input-btn"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'goShopBtnColor', '#ffffff')
                        : look
                    "
                    >重置</span
                  >
                  <a-input
                    type="color"
                    v-model="pageJson.goShopBtnColor"
                    :disabled="readOnly"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.goShopBtnShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体大小</span>
                </div>
                <div class="input grow">
                  <a-slider
                    class="slider"
                    v-model="pageJson.goShopfontSize"
                    :min="8"
                    :max="16"
                    style="width: 120px"
                    :disabled="readOnly"
                  />
                  <a-input-number
                    v-model="pageJson.goShopfontSize"
                    :min="8"
                    :max="16"
                    style="margin-left: 16px; width: 60px"
                    :disabled="readOnly"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.goShopBtnShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体粗细</span>
                  <span class="value">{{
                    pageJson.goShopfontWeight | textThicknessFilter
                  }}</span>
                </div>
                <div class="input">
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.goShopfontWeight == 'normal'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'goShopfontWeight', 'normal')
                        : look
                    "
                  >
                    <i class="iconfont icon-icon_right_attributebar_zz_r"></i>
                  </div>
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.goShopfontWeight == 'bold'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'goShopfontWeight', 'bold')
                        : look
                    "
                  >
                    <i class="iconfont icon-icon_right_attributebar_zz_b"></i>
                  </div>
                </div>
              </div>
            </a-collapse-panel>
            <a-collapse-panel header="活动名称">
              <div class="flex">
                <span>标题</span>
                <div class="right posi">
                  <a-input
                    v-model="pageJson.activetyName"
                    placeholder="输入1-8字(不输入则不展示)"
                    :max-length="8"
                    :disabled="readOnly"
                  />
                  <span class="limit"
                    >{{ pageJson.activetyName.length || 0 }}/8</span
                  >
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.activetyName && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体颜色</span>
                  <span class="value">{{ pageJson.activetyNameColor }}</span>
                </div>
                <div class="input color">
                  <span
                    class="input-btn"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'activetyNameColor', '#ffffff')
                        : look
                    "
                    >重置</span
                  >
                  <a-input
                    type="color"
                    v-model="pageJson.activetyNameColor"
                    :disabled="readOnly"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.activetyName && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体大小</span>
                </div>
                <div class="input grow">
                  <a-slider
                    class="slider"
                    v-model="pageJson.activetyNamefontSize"
                    :min="28"
                    :max="46"
                    :disabled="readOnly"
                    style="width: 120px"
                  />
                  <a-input-number
                    v-model="pageJson.activetyNamefontSize"
                    :min="28"
                    :max="46"
                    :disabled="readOnly"
                    style="margin-left: 16px; width: 60px"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.activetyName && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体粗细</span>
                  <span class="value">{{
                    pageJson.activetyNamefontWeight | textThicknessFilter
                  }}</span>
                </div>
                <div class="input">
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.activetyNamefontWeight == 'normal'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(
                            pageJson,
                            'activetyNamefontWeight',
                            'normal'
                          )
                        : look
                    "
                  >
                    <i class="iconfont icon-icon_right_attributebar_zz_r"></i>
                  </div>
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.activetyNamefontWeight == 'bold'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(
                            pageJson,
                            'activetyNamefontWeight',
                            'bold'
                          )
                        : look
                    "
                  >
                    <i class="iconfont icon-icon_right_attributebar_zz_b"></i>
                  </div>
                </div>
              </div>
              <a-divider />
              <div class="flex mt10">
                <span>描述</span>
                <div class="right posi">
                  <a-input
                    v-model="pageJson.activetyDesc"
                    placeholder="输入1-15字(不输入则不展示)"
                    :max-length="15"
                    :disabled="readOnly"
                  />
                  <span class="limit"
                    >{{ pageJson.activetyDesc.length || 0 }}/15</span
                  >
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.activetyDesc && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体颜色</span>
                  <span class="value">{{ pageJson.activetyDescColor }}</span>
                </div>
                <div class="input color">
                  <span
                    class="input-btn"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'activetyDescColor', '#ffffff')
                        : look
                    "
                    >重置</span
                  >
                  <a-input
                    type="color"
                    v-model="pageJson.activetyDescColor"
                    :disabled="readOnly"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.activetyDesc && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体大小</span>
                </div>
                <div class="input grow">
                  <a-slider
                    class="slider"
                    v-model="pageJson.activetyDescfontSize"
                    :min="8"
                    :max="20"
                    style="width: 120px"
                    :disabled="readOnly"
                  />
                  <a-input-number
                    v-model="pageJson.activetyDescfontSize"
                    :min="8"
                    :max="20"
                    :disabled="readOnly"
                    style="margin-left: 16px; width: 60px"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.activetyDesc && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体粗细</span>
                  <span class="value">{{
                    pageJson.activetyDescfontWeight | textThicknessFilter
                  }}</span>
                </div>
                <div class="input">
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.activetyDescfontWeight == 'normal'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(
                            pageJson,
                            'activetyDescfontWeight',
                            'normal'
                          )
                        : look
                    "
                  >
                    <i class="iconfont icon-icon_right_attributebar_zz_r"></i>
                  </div>
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.activetyDescfontWeight == 'bold'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(
                            pageJson,
                            'activetyDescfontWeight',
                            'bold'
                          )
                        : look
                    "
                  >
                    <i class="iconfont icon-icon_right_attributebar_zz_b"></i>
                  </div>
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.activetyDesc && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">底框颜色</span>
                  <span class="value">{{
                    pageJson.activetyDescBordercolor
                  }}</span>
                </div>
                <div class="input color">
                  <span
                    class="input-btn"
                    @click="
                      !readOnly
                        ? changeCheck(
                            pageJson,
                            'activetyDescBordercolor',
                            '#ffffff'
                          )
                        : look
                    "
                    >重置</span
                  >
                  <a-input
                    type="color"
                    v-model="pageJson.activetyDescBordercolor"
                    :disabled="readOnly"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.activetyDesc && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">底框倒角</span>
                  <span class="value">{{
                    pageJson.activetyDescAngelType | angleTypeFilter
                  }}</span>
                </div>
                <div class="input">
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.activetyDescAngelType == '0'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(false, 'activetyDescAngelType', '0')
                        : look
                    "
                  >
                    <i
                      class="
                        iconfont
                        icon-icon_right_attributebar_zhijiao_default
                      "
                    ></i>
                  </div>
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.activetyDescAngelType == '1'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(false, 'activetyDescAngelType', '1')
                        : look
                    "
                  >
                    <i
                      class="
                        iconfont
                        icon-icon_right_attributebar_yuanjiao_default
                      "
                    ></i>
                  </div>
                </div>
              </div>
              <a-divider />
              <div class="flex mt10">
                <span>剩余次数</span>
                <div>
                  <a-radio-group
                    name="radioGroup"
                    v-model="pageJson.residueNum"
                    :disabled="readOnly"
                  >
                    <a-radio :value="1"> 展示 </a-radio>
                    <a-radio :value="0"> 隐藏 </a-radio>
                  </a-radio-group>
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.residueNum && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体颜色</span>
                  <span class="value">{{ pageJson.residueNumColor }}</span>
                </div>
                <div class="input color">
                  <span
                    class="input-btn"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'residueNumColor', '#ffffff')
                        : look
                    "
                    >重置</span
                  >
                  <a-input
                    type="color"
                    v-model="pageJson.residueNumColor"
                    :disabled="readOnly"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.residueNum && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体大小</span>
                </div>
                <div class="input grow">
                  <a-slider
                    class="slider"
                    v-model="pageJson.residueNumfontSize"
                    :min="8"
                    :max="20"
                    :disabled="readOnly"
                    style="width: 120px"
                  />
                  <a-input-number
                    v-model="pageJson.residueNumfontSize"
                    :min="8"
                    :max="20"
                    :disabled="readOnly"
                    style="margin-left: 16px; width: 60px"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.residueNum && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体粗细</span>
                  <span class="value">{{
                    pageJson.residueNumfontWeight | textThicknessFilter
                  }}</span>
                </div>
                <div class="input">
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.residueNumfontWeight == 'normal'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(
                            pageJson,
                            'residueNumfontWeight',
                            'normal'
                          )
                        : look
                    "
                  >
                    <i class="iconfont icon-icon_right_attributebar_zz_r"></i>
                  </div>
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.residueNumfontWeight == 'bold'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'residueNumfontWeight', 'bold')
                        : look
                    "
                  >
                    <i class="iconfont icon-icon_right_attributebar_zz_b"></i>
                  </div>
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.residueNum && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">底框颜色</span>
                  <span class="value">{{
                    pageJson.residueNumBordercolor
                  }}</span>
                </div>
                <div class="input color">
                  <span
                    class="input-btn"
                    @click="
                      !readOnly
                        ? changeCheck(
                            pageJson,
                            'residueNumBordercolor',
                            '#ffffff'
                          )
                        : look
                    "
                    >重置</span
                  >
                  <a-input
                    type="color"
                    v-model="pageJson.residueNumBordercolor"
                    :disabled="readOnly"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.residueNum && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">底框倒角</span>
                  <span class="value">{{
                    pageJson.residueNumAngelType | angleTypeFilter
                  }}</span>
                </div>
                <div class="input">
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.residueNumAngelType == '0'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(false, 'residueNumAngelType', '0')
                        : look
                    "
                  >
                    <i
                      class="
                        iconfont
                        icon-icon_right_attributebar_zhijiao_default
                      "
                    ></i>
                  </div>
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.residueNumAngelType == '1'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(false, 'residueNumAngelType', '1')
                        : look
                    "
                  >
                    <i
                      class="
                        iconfont
                        icon-icon_right_attributebar_yuanjiao_default
                      "
                    ></i>
                  </div>
                </div>
              </div>
            </a-collapse-panel>
            <a-collapse-panel header="盲盒样式">
              <div class="flex">
                <span>数量</span>
                <div>
                  <a-radio-group
                    name="radioGroup"
                    v-model="pageJson.BoxNum"
                    :disabled="readOnly"
                  >
                    <a-radio :value="4"> 4盒 </a-radio>
                    <a-radio :value="6"> 6盒 </a-radio>
                    <a-radio :value="9"> 9盒 </a-radio>
                  </a-radio-group>
                </div>
              </div>

              <div class="flex pad15 mt10" v-if="pageJson.styleType == 2">
                <div
                  v-if="pageJson.BoxStyleType == 1"
                  class="blankUpbox"
                  :style="{
                    background: `url(${require('@/assets/images/product/choujiang_manghe.png')})
                      no-repeat top center / cover`,
                  }"
                ></div>
                <div v-else>
                  <div
                    v-if="pageJson.BoxImgUrl"
                    @click="
                      !readOnly ? openUpload('image', pageJson, 'box') : look
                    "
                    class="upload_wrap"
                    :style="{
                      background: `url(${pageJson.BoxImgUrl}) no-repeat 50% 50%/cover`,
                    }"
                  >
                    <p class="updateImg">更换图片</p>
                  </div>
                  <div
                    v-else
                    class="upload_wrap uploadBox"
                    @click="
                      !readOnly ? openUpload('image', pageJson, 'box') : look
                    "
                  >
                    <a-icon type="plus" />
                    <p>上传图片</p>
                  </div>
                </div>
                <div class="grow">
                  <a-radio-group
                    v-model="pageJson.BoxStyleType"
                    :disabled="readOnly"
                  >
                    <a-radio :style="radioStyle" :value="1"> 系统默认 </a-radio>
                    <a-radio
                      :style="[
                        radioStyle,
                        {
                          position: 'relative',
                        },
                      ]"
                      :value="2"
                    >
                      自定义
                      <div class="radiotext">建议宽度220px，高度220px</div>
                    </a-radio>
                  </a-radio-group>
                </div>
              </div>
              <div
                class="flex mt10"
                v-for="(item, index) in boxList"
                :key="index"
                v-show="index + 1 <= pageJson.BoxNum"
              >
                <span>盲盒{{ index + 1 }}</span>
                <div class="right posi">
                  <a-input
                    v-model="pageJson.boxList[index]"
                    placeholder="输入1-5字"
                    :max-length="5"
                    :disabled="readOnly"
                  />
                  <span class="limit"
                    >{{ pageJson.boxList[index].length || 0 }}/5</span
                  >
                </div>
              </div>
              <a-divider v-if="pageJson.styleType == 2" />
              <div class="flex mt10" v-if="pageJson.styleType == 2">
                <div class="label">
                  <span class="name">字体颜色</span>
                  <span class="value">{{ pageJson.BoxColor }}</span>
                </div>
                <div class="input color">
                  <span
                    class="input-btn"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'BoxColor', '#ffffff')
                        : look
                    "
                    >重置</span
                  >
                  <a-input type="color" v-model="pageJson.BoxColor" />
                </div>
              </div>
              <div class="flex mt10" v-if="pageJson.styleType == 2">
                <div class="label">
                  <span class="name">字体大小</span>
                </div>
                <div class="input grow">
                  <a-slider
                    class="slider"
                    v-model="pageJson.BoxfontSize"
                    :min="8"
                    :max="18"
                    :disabled="readOnly"
                    style="width: 120px"
                  />
                  <a-input-number
                    v-model="pageJson.BoxfontSize"
                    :min="8"
                    :max="18"
                    :disabled="readOnly"
                    style="margin-left: 16px; width: 60px"
                  />
                </div>
              </div>
              <div class="flex mt10" v-if="pageJson.styleType == 2">
                <div class="label">
                  <span class="name">字体粗细</span>
                  <span class="value">{{
                    pageJson.BoxfontWeight | textThicknessFilter
                  }}</span>
                </div>
                <div class="input">
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.BoxfontWeight == 'normal'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'BoxfontWeight', 'normal')
                        : look
                    "
                  >
                    <i class="iconfont icon-icon_right_attributebar_zz_r"></i>
                  </div>
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.BoxfontWeight == 'bold' ? 'iconfont-check' : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'BoxfontWeight', 'bold')
                        : look
                    "
                  >
                    <i class="iconfont icon-icon_right_attributebar_zz_b"></i>
                  </div>
                </div>
              </div>
              <div class="flex mt10" v-if="pageJson.styleType == 2">
                <div class="label">
                  <span class="name">底框颜色</span>
                  <span class="value">{{ pageJson.BoxBordercolor }}</span>
                </div>
                <div class="input color">
                  <span
                    class="input-btn"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'BoxBordercolor', '#ffffff')
                        : look
                    "
                    >重置</span
                  >
                  <a-input
                    type="color"
                    v-model="pageJson.BoxBordercolor"
                    :disabled="readOnly"
                  />
                </div>
              </div>
              <div class="flex mt10" v-if="pageJson.styleType == 2">
                <div class="label">
                  <span class="name">底框倒角</span>
                  <span class="value">{{
                    pageJson.BoxAngelType | angleTypeFilter
                  }}</span>
                </div>
                <div class="input">
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.BoxAngelType == '0' ? 'iconfont-check' : '',
                    ]"
                    @click="
                      !readOnly ? changeCheck(false, 'BoxAngelType', '0') : look
                    "
                  >
                    <i
                      class="
                        iconfont
                        icon-icon_right_attributebar_zhijiao_default
                      "
                    ></i>
                  </div>
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.BoxAngelType == '1' ? 'iconfont-check' : '',
                    ]"
                    @click="
                      !readOnly ? changeCheck(false, 'BoxAngelType', '1') : look
                    "
                  >
                    <i
                      class="
                        iconfont
                        icon-icon_right_attributebar_yuanjiao_default
                      "
                    ></i>
                  </div>
                </div>
              </div>
            </a-collapse-panel>
            <a-collapse-panel header="奖品池">
              <div class="flex">
                <span>奖品池</span>
                <div>
                  <a-radio-group
                    name="radioGroup"
                    :disabled="readOnly"
                    v-model="pageJson.giftPoolShow"
                  >
                    <a-radio :value="1"> 展示 </a-radio>
                    <a-radio :value="0"> 隐藏 </a-radio>
                  </a-radio-group>
                </div>
              </div>
              <div class="flex mt10" v-if="pageJson.giftPoolShow">
                <span>名称</span>
                <div class="right posi">
                  <a-input
                    v-model="pageJson.giftPoolName"
                    placeholder="输入1-8字"
                    :max-length="8"
                    :disabled="readOnly"
                  />
                  <span class="limit"
                    >{{ pageJson.giftPoolName.length || 0 }}/8</span
                  >
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.giftPoolShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体颜色</span>
                  <span class="value">{{ pageJson.giftPoolColor }}</span>
                </div>
                <div class="input color">
                  <span
                    class="input-btn"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'giftPoolColor', '#ffffff')
                        : look
                    "
                    >重置</span
                  >
                  <a-input
                    type="color"
                    v-model="pageJson.giftPoolColor"
                    :disabled="readOnly"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.giftPoolShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体大小</span>
                </div>
                <div class="input grow">
                  <a-slider
                    class="slider"
                    v-model="pageJson.giftPoolfontSize"
                    :min="12"
                    :max="22"
                    :disabled="readOnly"
                    style="width: 120px"
                  />
                  <a-input-number
                    v-model="pageJson.giftPoolfontSize"
                    :min="12"
                    :max="22"
                    :disabled="readOnly"
                    style="margin-left: 16px; width: 60px"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.giftPoolShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体粗细</span>
                  <span class="value">{{
                    pageJson.giftPoolfontWeight | textThicknessFilter
                  }}</span>
                </div>
                <div class="input">
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.giftPoolfontWeight == 'normal'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'giftPoolfontWeight', 'normal')
                        : look
                    "
                  >
                    <i class="iconfont icon-icon_right_attributebar_zz_r"></i>
                  </div>
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.giftPoolfontWeight == 'bold'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'giftPoolfontWeight', 'bold')
                        : look
                    "
                  >
                    <i class="iconfont icon-icon_right_attributebar_zz_b"></i>
                  </div>
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.giftPoolShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">标题底框</span>
                  <span class="value">{{ pageJson.poolTitleColor }}</span>
                </div>
                <div class="input color">
                  <span
                    class="input-btn"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'poolTitleColor', '#ffffff')
                        : look
                    "
                    >重置</span
                  >
                  <a-input
                    type="color"
                    v-model="pageJson.poolTitleColor"
                    :disabled="readOnly"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.giftPoolShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">标题倒角</span>
                  <span class="value">{{
                    pageJson.poolAngelType | angleTypeFilter
                  }}</span>
                </div>
                <div class="input">
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.poolAngelType == '0' ? 'iconfont-check' : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(false, 'poolAngelType', '0')
                        : look
                    "
                  >
                    <i
                      class="
                        iconfont
                        icon-icon_right_attributebar_zhijiao_default
                      "
                    ></i>
                  </div>
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.poolAngelType == '1' ? 'iconfont-check' : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(false, 'poolAngelType', '1')
                        : look
                    "
                  >
                    <i
                      class="
                        iconfont
                        icon-icon_right_attributebar_yuanjiao_default
                      "
                    ></i>
                  </div>
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.giftPoolShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">内容底框</span>
                  <span class="value">{{ pageJson.poolTextColor }}</span>
                </div>
                <div class="input color">
                  <span
                    class="input-btn"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'poolTextColor', '#ffffff')
                        : look
                    "
                    >重置</span
                  >
                  <a-input
                    type="color"
                    v-model="pageJson.poolTextColor"
                    :disabled="readOnly"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.giftPoolShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">内容倒角</span>
                  <span class="value">{{
                    pageJson.pooltextAngelType | angleTypeFilter
                  }}</span>
                </div>
                <div class="input">
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.pooltextAngelType == '0' ? 'iconfont-check' : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(false, 'pooltextAngelType', '0')
                        : look
                    "
                  >
                    <i
                      class="
                        iconfont
                        icon-icon_right_attributebar_zhijiao_default
                      "
                    ></i>
                  </div>
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.pooltextAngelType == '1' ? 'iconfont-check' : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(false, 'pooltextAngelType', '1')
                        : look
                    "
                  >
                    <i
                      class="
                        iconfont
                        icon-icon_right_attributebar_yuanjiao_default
                      "
                    ></i>
                  </div>
                </div>
              </div>
              <a-divider
                v-if="pageJson.giftPoolShow && pageJson.styleType == 2"
              />
              <div
                class="flex mt10"
                v-if="pageJson.styleType == 2 && pageJson.giftPoolShow"
              >
                <span>中奖轮播</span>
                <div>
                  <a-radio-group
                    name="radioGroup"
                    v-model="pageJson.prizeCarousel"
                    :disabled="readOnly"
                  >
                    <a-radio :value="1"> 展示 </a-radio>
                    <a-radio :value="0"> 隐藏 </a-radio>
                  </a-radio-group>
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="
                  pageJson.prizeCarousel &&
                  pageJson.styleType == 2 &&
                  pageJson.giftPoolShow
                "
              >
                <div class="label">
                  <span class="name">字体颜色</span>
                  <span class="value">{{ pageJson.prizeColor }}</span>
                </div>
                <div class="input color">
                  <span
                    class="input-btn"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'prizeColor', '#ffffff')
                        : look
                    "
                    >重置</span
                  >
                  <a-input
                    type="color"
                    v-model="pageJson.prizeColor"
                    :disabled="readOnly"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="
                  pageJson.prizeCarousel &&
                  pageJson.styleType == 2 &&
                  pageJson.giftPoolShow
                "
              >
                <div class="label">
                  <span class="name">字体大小</span>
                </div>
                <div class="input grow">
                  <a-slider
                    class="slider"
                    v-model="pageJson.prizefontSize"
                    :min="12"
                    :max="22"
                    :disabled="readOnly"
                    style="width: 120px"
                  />
                  <a-input-number
                    v-model="pageJson.prizefontSize"
                    :min="12"
                    :max="22"
                    :disabled="readOnly"
                    style="margin-left: 16px; width: 60px"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="
                  pageJson.prizeCarousel &&
                  pageJson.styleType == 2 &&
                  pageJson.giftPoolShow
                "
              >
                <div class="label">
                  <span class="name">字体粗细</span>
                  <span class="value">{{
                    pageJson.prizefontWeight | textThicknessFilter
                  }}</span>
                </div>
                <div class="input">
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.prizefontWeight == 'normal'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'prizefontWeight', 'normal')
                        : look
                    "
                  >
                    <i class="iconfont icon-icon_right_attributebar_zz_r"></i>
                  </div>
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.prizefontWeight == 'bold'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'prizefontWeight', 'bold')
                        : look
                    "
                  >
                    <i class="iconfont icon-icon_right_attributebar_zz_b"></i>
                  </div>
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="
                  pageJson.prizeCarousel &&
                  pageJson.styleType == 2 &&
                  pageJson.giftPoolShow
                "
              >
                <div class="label">
                  <span class="name">底框颜色</span>
                  <span class="value">{{ pageJson.prizeBordercolor }}</span>
                </div>
                <div class="input color">
                  <span
                    class="input-btn"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'prizeBordercolor', '#ffffff')
                        : look
                    "
                    >重置</span
                  >
                  <a-input
                    type="color"
                    v-model="pageJson.prizeBordercolor"
                    :disabled="readOnly"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="
                  pageJson.prizeCarousel &&
                  pageJson.styleType == 2 &&
                  pageJson.giftPoolShow
                "
              >
                <div class="label">
                  <span class="name">底框倒角</span>
                  <span class="value">{{
                    pageJson.prizeAngelType | angleTypeFilter
                  }}</span>
                </div>
                <div class="input">
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.prizeAngelType == '0' ? 'iconfont-check' : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(false, 'prizeAngelType', '0')
                        : look
                    "
                  >
                    <i
                      class="
                        iconfont
                        icon-icon_right_attributebar_zhijiao_default
                      "
                    ></i>
                  </div>
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.prizeAngelType == '1' ? 'iconfont-check' : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(false, 'prizeAngelType', '1')
                        : look
                    "
                  >
                    <i
                      class="
                        iconfont
                        icon-icon_right_attributebar_yuanjiao_default
                      "
                    ></i>
                  </div>
                </div>
              </div>
            </a-collapse-panel>
            <a-collapse-panel header="我的奖品">
              <div class="flex">
                <span>我的奖品</span>
                <div>
                  <a-radio-group
                    name="radioGroup"
                    v-model="pageJson.myPrizeShow"
                    :disabled="readOnly"
                  >
                    <a-radio :value="1"> 展示 </a-radio>
                    <a-radio :value="0"> 隐藏 </a-radio>
                  </a-radio-group>
                </div>
              </div>
              <div class="flex mt10" v-if="pageJson.myPrizeShow">
                <span>名称</span>
                <div class="right posi">
                  <a-input
                    v-model="pageJson.myPrizeName"
                    placeholder="输入1-8字"
                    :max-length="8"
                    :disabled="readOnly"
                  />
                  <span class="limit"
                    >{{ pageJson.myPrizeName.length || 0 }}/8</span
                  >
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.myPrizeShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体颜色</span>
                  <span class="value">{{ pageJson.awardColor }}</span>
                </div>
                <div class="input color">
                  <span
                    class="input-btn"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'awardColor', '#ffffff')
                        : look
                    "
                    >重置</span
                  >
                  <a-input
                    type="color"
                    v-model="pageJson.awardColor"
                    :disabled="readOnly"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.myPrizeShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体大小</span>
                </div>
                <div class="input grow">
                  <a-slider
                    class="slider"
                    v-model="pageJson.awardfontSize"
                    :min="12"
                    :max="22"
                    :disabled="readOnly"
                    style="width: 120px"
                  />
                  <a-input-number
                    v-model="pageJson.awardfontSize"
                    :min="12"
                    :max="22"
                    :disabled="readOnly"
                    style="margin-left: 16px; width: 60px"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.myPrizeShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体粗细</span>
                  <span class="value">{{
                    pageJson.awardfontWeight | textThicknessFilter
                  }}</span>
                </div>
                <div class="input">
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.awardfontWeight == 'normal'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'awardfontWeight', 'normal')
                        : look
                    "
                  >
                    <i class="iconfont icon-icon_right_attributebar_zz_r"></i>
                  </div>
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.awardfontWeight == 'bold'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'awardfontWeight', 'bold')
                        : look
                    "
                  >
                    <i class="iconfont icon-icon_right_attributebar_zz_b"></i>
                  </div>
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.myPrizeShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">标题底框</span>
                  <span class="value">{{ pageJson.awardTitleColor }}</span>
                </div>
                <div class="input color">
                  <span
                    class="input-btn"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'awardTitleColor', '#ffffff')
                        : look
                    "
                    >重置</span
                  >
                  <a-input
                    type="color"
                    v-model="pageJson.awardTitleColor"
                    :disabled="readOnly"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.myPrizeShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">标题倒角</span>
                  <span class="value">{{
                    pageJson.awardAngelType | angleTypeFilter
                  }}</span>
                </div>
                <div class="input">
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.awardAngelType == '0' ? 'iconfont-check' : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(false, 'awardAngelType', '0')
                        : look
                    "
                  >
                    <i
                      class="
                        iconfont
                        icon-icon_right_attributebar_zhijiao_default
                      "
                    ></i>
                  </div>
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.awardAngelType == '1' ? 'iconfont-check' : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(false, 'awardAngelType', '1')
                        : look
                    "
                  >
                    <i
                      class="
                        iconfont
                        icon-icon_right_attributebar_yuanjiao_default
                      "
                    ></i>
                  </div>
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.myPrizeShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">内容底框</span>
                  <span class="value">{{ pageJson.awardTextColor }}</span>
                </div>
                <div class="input color">
                  <span
                    class="input-btn"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'awardTextColor', '#ffffff')
                        : look
                    "
                    >重置</span
                  >
                  <a-input
                    type="color"
                    v-model="pageJson.awardTextColor"
                    :disabled="readOnly"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.myPrizeShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">内容倒角</span>
                  <span class="value">{{
                    pageJson.awardTextAngelType | angleTypeFilter
                  }}</span>
                </div>
                <div class="input">
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.awardTextAngelType == '0'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(false, 'awardTextAngelType', '0')
                        : look
                    "
                  >
                    <i
                      class="
                        iconfont
                        icon-icon_right_attributebar_zhijiao_default
                      "
                    ></i>
                  </div>
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.awardTextAngelType == '1'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(false, 'awardTextAngelType', '1')
                        : look
                    "
                  >
                    <i
                      class="
                        iconfont
                        icon-icon_right_attributebar_yuanjiao_default
                      "
                    ></i>
                  </div>
                </div>
              </div>
              <a-divider />
              <div class="flex mt10">
                <span>我的奖品按钮</span>
                <div>
                  <a-radio-group
                    name="radioGroup"
                    v-model="pageJson.myPrizeBtnShow"
                    :disabled="readOnly"
                  >
                    <a-radio :value="1"> 展示 </a-radio>
                    <a-radio :value="0"> 隐藏 </a-radio>
                  </a-radio-group>
                </div>
              </div>

              <div class="flex mt10" v-if="pageJson.myPrizeBtnShow">
                <span>名称</span>
                <div class="right posi">
                  <a-input
                    v-model="pageJson.myPrizeBtnName"
                    placeholder="输入1-6字"
                    :max-length="6"
                    :disabled="readOnly"
                  />
                  <span class="limit"
                    >{{ pageJson.myPrizeBtnName.length || 0 }}/6</span
                  >
                </div>
              </div>

               <div
                class="flex mt10"
                v-if="pageJson.myPrizeBtnShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体颜色</span>
                  <span class="value">{{ pageJson.awardBtnColor }}</span>
                </div>
                <div class="input color">
                  <span
                    class="input-btn"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'awardBtnColor', '#ffffff')
                        : look
                    "
                    >重置</span
                  >
                  <a-input
                    type="color"
                    v-model="pageJson.awardBtnColor"
                    :disabled="readOnly"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.myPrizeBtnShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体大小</span>
                </div>
                <div class="input grow">
                  <a-slider
                    class="slider"
                    v-model="pageJson.awardfontBtnSize"
                    :min="12"
                    :max="18"
                    :disabled="readOnly"
                    style="width: 120px"
                  />
                  <a-input-number
                    v-model="pageJson.awardfontBtnSize"
                    :min="12"
                    :max="18"
                    :disabled="readOnly"
                    style="margin-left: 16px; width: 60px"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.myPrizeBtnShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体粗细</span>
                  <span class="value">{{
                    pageJson.awardfontBtnWeight | textThicknessFilter
                  }}</span>
                </div>
                <div class="input">
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.awardfontBtnWeight == 'normal'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'awardfontBtnWeight', 'normal')
                        : look
                    "
                  >
                    <i class="iconfont icon-icon_right_attributebar_zz_r"></i>
                  </div>
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.awardfontBtnWeight == 'bold'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'awardfontBtnWeight', 'bold')
                        : look
                    "
                  >
                    <i class="iconfont icon-icon_right_attributebar_zz_b"></i>
                  </div>
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.myPrizeBtnShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">底框颜色</span>
                  <span class="value">{{ pageJson.awardTitleBtnColor }}</span>
                </div>
                <div class="input color">
                  <span
                    class="input-btn"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'awardTitleBtnColor', '#676596')
                        : look
                    "
                    >重置</span
                  >
                  <a-input
                    type="color"
                    v-model="pageJson.awardTitleBtnColor"
                    :disabled="readOnly"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.myPrizeBtnShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">底框倒角</span>
                  <span class="value">{{
                    pageJson.awardAngelBtnType | angleTypeFilter
                  }}</span>
                </div>
                <div class="input">
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.awardAngelBtnType == '0' ? 'iconfont-check' : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(false, 'awardAngelBtnType', '0')
                        : look
                    "
                  >
                    <i
                      class="
                        iconfont
                        icon-icon_right_attributebar_zhijiao_default
                      "
                    ></i>
                  </div>
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.awardAngelBtnType == '1' ? 'iconfont-check' : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(false, 'awardAngelBtnType', '1')
                        : look
                    "
                  >
                    <i
                      class="
                        iconfont
                        icon-icon_right_attributebar_yuanjiao_default
                      "
                    ></i>
                  </div>
                </div>
              </div>
            </a-collapse-panel>
            <a-collapse-panel header="活动规则">
              <div class="flex">
                <span>活动规则</span>
                <div>
                  <a-radio-group
                    name="radioGroup"
                    :disabled="readOnly"
                    v-model="pageJson.activetyRuleShow"
                  >
                    <a-radio :value="1"> 展示 </a-radio>
                    <a-radio :value="0"> 隐藏 </a-radio>
                  </a-radio-group>
                </div>
              </div>
              <div class="flex mt10" v-if="pageJson.activetyRuleShow">
                <span>名称</span>
                <div class="right posi">
                  <a-input
                    v-model="pageJson.activetyRuleText"
                    placeholder="输入1-8字"
                    :max-length="8"
                    :disabled="readOnly"
                  />
                  <span class="limit"
                    >{{ pageJson.activetyRuleText.length || 0 }}/8</span
                  >
                </div>
              </div>

              <div
                class="flex mt10"
                v-if="pageJson.activetyRuleShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体颜色</span>
                  <span class="value">{{ pageJson.ruleTitleColor }}</span>
                </div>
                <div class="input color">
                  <span
                    class="input-btn"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'ruleTitleColor', '#ffffff')
                        : look
                    "
                    >重置</span
                  >
                  <a-input
                    type="color"
                    v-model="pageJson.ruleTitleColor"
                    :disabled="readOnly"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.activetyRuleShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体大小</span>
                </div>
                <div class="input grow">
                  <a-slider
                    class="slider"
                    v-model="pageJson.ruleTitlefontSize"
                    :min="12"
                    :max="22"
                    :disabled="readOnly"
                    style="width: 120px"
                  />
                  <a-input-number
                    v-model="pageJson.ruleTitlefontSize"
                    :min="12"
                    :max="22"
                    :disabled="readOnly"
                    style="margin-left: 16px; width: 60px"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.activetyRuleShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体粗细</span>
                  <span class="value">{{
                    pageJson.ruleTitlefontWeight | textThicknessFilter
                  }}</span>
                </div>
                <div class="input">
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.ruleTitlefontWeight == 'normal'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'ruleTitlefontWeight', 'normal')
                        : look
                    "
                  >
                    <i class="iconfont icon-icon_right_attributebar_zz_r"></i>
                  </div>
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.ruleTitlefontWeight == 'bold'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'ruleTitlefontWeight', 'bold')
                        : look
                    "
                  >
                    <i class="iconfont icon-icon_right_attributebar_zz_b"></i>
                  </div>
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.activetyRuleShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">标题底框</span>
                  <span class="value">{{ pageJson.ruleTitlebgColor }}</span>
                </div>
                <div class="input color">
                  <span
                    class="input-btn"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'ruleTitlebgColor', '#ffffff')
                        : look
                    "
                    >重置</span
                  >
                  <a-input
                    type="color"
                    v-model="pageJson.ruleTitlebgColor"
                    :disabled="readOnly"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.activetyRuleShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">底框倒角</span>
                  <span class="value">{{
                    pageJson.ruleTitleAngelType | angleTypeFilter
                  }}</span>
                </div>
                <div class="input">
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.ruleTitleAngelType == '0'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(false, 'ruleTitleAngelType', '0')
                        : look
                    "
                  >
                    <i
                      class="
                        iconfont
                        icon-icon_right_attributebar_zhijiao_default
                      "
                    ></i>
                  </div>
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.ruleTitleAngelType == '1'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(false, 'ruleTitleAngelType', '1')
                        : look
                    "
                  >
                    <i
                      class="
                        iconfont
                        icon-icon_right_attributebar_yuanjiao_default
                      "
                    ></i>
                  </div>
                </div>
              </div>
              <a-divider v-if="pageJson.activetyRuleShow" />
              <div class="flex mt10" v-if="pageJson.activetyRuleShow">
                <span style="display: flex; align-items: center"
                  >内容
                  <span class="activetyPatation"
                    >输入1-500个字（不输入则不展示）</span
                  ></span
                >
              </div>
              <div class="activety" v-if="pageJson.activetyRuleShow">
                <a-textarea
                  placeholder="请输入分享描述"
                  :max-length="500"
                  v-model="pageJson.activetyRuleDesc"
                  :disabled="readOnly"
                  :rows="4"
                />
                <span class="limitWords"
                  >{{ pageJson.activetyRuleDesc.length || 0 }}/500</span
                >
              </div>

              <div
                class="flex mt10"
                v-if="pageJson.activetyRuleShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体颜色</span>
                  <span class="value">{{ pageJson.ruleTextColor }}</span>
                </div>
                <div class="input color">
                  <span
                    class="input-btn"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'ruleTextColor', '#ffffff')
                        : look
                    "
                    >重置</span
                  >
                  <a-input
                    type="color"
                    v-model="pageJson.ruleTextColor"
                    :disabled="readOnly"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.activetyRuleShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体大小</span>
                </div>
                <div class="input grow">
                  <a-slider
                    class="slider"
                    v-model="pageJson.ruleTextfontSize"
                    :min="8"
                    :max="20"
                    :disabled="readOnly"
                    style="width: 120px"
                  />
                  <a-input-number
                    v-model="pageJson.ruleTextfontSize"
                    :min="8"
                    :max="20"
                    :disabled="readOnly"
                    style="margin-left: 16px; width: 60px"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.activetyRuleShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体粗细</span>
                  <span class="value">{{
                    pageJson.ruleTextfontWeight | textThicknessFilter
                  }}</span>
                </div>
                <div class="input">
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.ruleTextfontWeight == 'normal'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'ruleTextfontWeight', 'normal')
                        : look
                    "
                  >
                    <i class="iconfont icon-icon_right_attributebar_zz_r"></i>
                  </div>
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.ruleTextfontWeight == 'bold'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'ruleTextfontWeight', 'bold')
                        : look
                    "
                  >
                    <i class="iconfont icon-icon_right_attributebar_zz_b"></i>
                  </div>
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.activetyRuleShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">内容底框</span>
                  <span class="value">{{ pageJson.ruleTextbgColor }}</span>
                </div>
                <div class="input color">
                  <span
                    class="input-btn"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'ruleTextbgColor', '#ffffff')
                        : look
                    "
                    >重置</span
                  >
                  <a-input
                    type="color"
                    v-model="pageJson.ruleTextbgColor"
                    :disabled="readOnly"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.activetyRuleShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">底框倒角</span>
                  <span class="value">{{
                    pageJson.ruleTextAngelType | angleTypeFilter
                  }}</span>
                </div>
                <div class="input">
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.ruleTextAngelType == '0' ? 'iconfont-check' : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(false, 'ruleTextAngelType', '0')
                        : look
                    "
                  >
                    <i
                      class="
                        iconfont
                        icon-icon_right_attributebar_zhijiao_default
                      "
                    ></i>
                  </div>
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.ruleTextAngelType == '1' ? 'iconfont-check' : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(false, 'ruleTextAngelType', '1')
                        : look
                    "
                  >
                    <i
                      class="
                        iconfont
                        icon-icon_right_attributebar_yuanjiao_default
                      "
                    ></i>
                  </div>
                </div>
              </div>
            </a-collapse-panel>
            <a-collapse-panel header="悬浮获取抽奖按钮">
              <div class="flex">
                <span>悬浮获取抽奖按钮</span>
                <div>
                  <a-radio-group
                    name="radioGroup"
                    v-model="pageJson.drawBtnShow"
                    :disabled="readOnly"
                  >
                    <a-radio :value="1"> 展示 </a-radio>
                    <a-radio :value="0"> 隐藏 </a-radio>
                  </a-radio-group>
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.drawBtnShow && pageJson.styleType == 2"
              >
                <span>名称</span>
                <div class="right posi">
                  <a-input
                    v-model="pageJson.drawBtnText"
                    placeholder="输入1-8字"
                    :max-length="10"
                    :disabled="readOnly"
                  />
                  <span class="limit"
                    >{{ pageJson.drawBtnText.length || 0 }}/10</span
                  >
                </div>
              </div>

              <div
                class="flex mt10"
                v-if="pageJson.drawBtnShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体颜色</span>
                  <span class="value">{{ pageJson.drawtColor }}</span>
                </div>
                <div class="input color">
                  <span
                    class="input-btn"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'drawtColor', '#ffffff')
                        : look
                    "
                    >重置</span
                  >
                  <a-input
                    type="color"
                    v-model="pageJson.drawtColor"
                    :disabled="readOnly"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.drawBtnShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体大小</span>
                </div>
                <div class="input grow">
                  <a-slider
                    class="slider"
                    v-model="pageJson.drawfontSize"
                    :min="12"
                    :max="22"
                    :disabled="readOnly"
                    style="width: 120px"
                  />
                  <a-input-number
                    v-model="pageJson.drawfontSize"
                    :min="12"
                    :max="22"
                    :disabled="readOnly"
                    style="margin-left: 16px; width: 60px"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.drawBtnShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">字体粗细</span>
                  <span class="value">{{
                    pageJson.drawfontWeight | textThicknessFilter
                  }}</span>
                </div>
                <div class="input">
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.drawfontWeight == 'normal'
                        ? 'iconfont-check'
                        : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'drawfontWeight', 'normal')
                        : look
                    "
                  >
                    <i class="iconfont icon-icon_right_attributebar_zz_r"></i>
                  </div>
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.drawfontWeight == 'bold' ? 'iconfont-check' : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'drawfontWeight', 'bold')
                        : look
                    "
                  >
                    <i class="iconfont icon-icon_right_attributebar_zz_b"></i>
                  </div>
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.drawBtnShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">底框颜色</span>
                  <span class="value">{{ pageJson.drawbgColor }}</span>
                </div>
                <div class="input color">
                  <span
                    class="input-btn"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'drawbgColor', '#ffffff')
                        : look
                    "
                    >重置</span
                  >
                  <a-input
                    type="color"
                    v-model="pageJson.drawbgColor"
                    :disabled="readOnly"
                  />
                </div>
              </div>
              <div
                class="flex mt10"
                v-if="pageJson.drawBtnShow && pageJson.styleType == 2"
              >
                <div class="label">
                  <span class="name">底框倒角</span>
                  <span class="value">{{
                    pageJson.drawAngelType | angleTypeFilter
                  }}</span>
                </div>
                <div class="input">
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.drawAngelType == '0' ? 'iconfont-check' : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(false, 'drawAngelType', '0')
                        : look
                    "
                  >
                    <i
                      class="
                        iconfont
                        icon-icon_right_attributebar_zhijiao_default
                      "
                    ></i>
                  </div>
                  <div
                    :class="[
                      'form-radio-btn',
                      pageJson.drawAngelType == '1' ? 'iconfont-check' : '',
                    ]"
                    @click="
                      !readOnly
                        ? changeCheck(false, 'drawAngelType', '1')
                        : look
                    "
                  >
                    <i
                      class="
                        iconfont
                        icon-icon_right_attributebar_yuanjiao_default
                      "
                    ></i>
                  </div>
                </div>
              </div>
            </a-collapse-panel>
          </a-collapse>
        </div>
      </a-tab-pane>
      <a-tab-pane :key="2" tab="高级设置">
        <div class="editor">
          <a-collapse expandIconPosition="right">
            <a-collapse-panel header="中奖实物弹窗效果">
              <div class="flex">
                <div
                  v-if="pageJson.winningPrizeType == 1"
                  class="blankUpbox"
                  :style="{
                    background: `url(${require('@/assets/images/product/choujiang_Popup_zhongjiang.png')})
                      no-repeat top center / cover`,
                  }"
                ></div>
                <div v-else>
                  <div
                    v-if="pageJson.winningPrizeImgUrl"
                    @click="
                      !readOnly
                        ? openUpload('image', pageJson, 'winningPrize')
                        : look
                    "
                    class="upload_wrap"
                    :style="{
                      background: `url(${pageJson.winningPrizeImgUrl}) no-repeat 50% 50%/cover`,
                    }"
                  >
                    <p class="updateImg">更换图片</p>
                  </div>
                  <div
                    v-else
                    class="upload_wrap uploadBox"
                    @click="
                      !readOnly
                        ? openUpload('image', pageJson, 'winningPrize')
                        : look
                    "
                  >
                    <a-icon type="plus" />
                    <p>上传图片</p>
                  </div>
                </div>
                <div class="grow">
                  <a-radio-group
                    v-model="pageJson.winningPrizeType"
                    :disabled="readOnly"
                  >
                    <a-radio :style="radioStyle" :value="1"> 系统默认 </a-radio>
                    <a-radio
                      :style="[
                        radioStyle,
                        {
                          position: 'relative',
                        },
                      ]"
                      :value="2"
                    >
                      自定义
                      <div class="radiotext">建议宽度662px，高度大于628px</div>
                    </a-radio>
                  </a-radio-group>
                  <a-button type="primary" @click="start(1)">查看效果</a-button>
                </div>
              </div>
              <div class="flex mt20">
                <div class="label">
                  <span class="name">中奖名称字体颜色</span>
                  <span class="value">{{ pageJson.winningPrizeColor }}</span>
                </div>
                <div class="input color">
                  <span
                    class="input-btn"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'winningPrizeColor', '#ffffff')
                        : look
                    "
                    >重置</span
                  >
                  <a-input
                    type="color"
                    v-model="pageJson.winningPrizeColor"
                    :disabled="readOnly"
                  />
                </div>
              </div>
            </a-collapse-panel>
            <a-collapse-panel header="未中奖弹窗效果">
              <div class="flex">
                <div
                  v-if="pageJson.noWinningType == 1"
                  class="blankUpbox"
                  :style="{
                    background: `url(${require('@/assets/images/product/choujiang_Popup_weizhongjiang.png')})
                      no-repeat top center / cover`,
                  }"
                ></div>
                <div v-else>
                  <div
                    v-if="pageJson.noWinningImgUrl"
                    @click="
                      !readOnly
                        ? openUpload('image', pageJson, 'noWinning')
                        : look
                    "
                    class="upload_wrap"
                    :style="{
                      background: `url(${pageJson.noWinningImgUrl}) no-repeat 50% 50%/cover`,
                    }"
                  >
                    <p class="updateImg">更换图片</p>
                  </div>
                  <div
                    v-else
                    class="upload_wrap uploadBox"
                    @click="
                      !readOnly
                        ? openUpload('image', pageJson, 'noWinning')
                        : look
                    "
                  >
                    <a-icon type="plus" />
                    <p>上传图片</p>
                  </div>
                </div>
                <div class="grow">
                  <a-radio-group
                    v-model="pageJson.noWinningType"
                    :disabled="readOnly"
                  >
                    <a-radio :style="radioStyle" :value="1"> 系统默认 </a-radio>
                    <a-radio
                      :style="[
                        radioStyle,
                        {
                          position: 'relative',
                        },
                      ]"
                      :value="2"
                    >
                      自定义
                      <div class="radiotext">建议宽度662px，高度大于628px</div>
                    </a-radio>
                  </a-radio-group>
                  <a-button type="primary" @click="start(2)">查看效果</a-button>
                </div>
              </div>
            </a-collapse-panel>
            <a-collapse-panel header="积分展示图">
              <div class="flex">
                <div
                  v-if="pageJson.integralType == 1"
                  class="blankUpbox"
                  :style="{
                    background: `url(${require('@/assets/images/product/choujiang_jiangpin_jifen.png')})
                      no-repeat top center / cover`,
                  }"
                ></div>
                <div v-else>
                  <div
                    v-if="pageJson.integralImgUrl"
                    @click="
                      !readOnly
                        ? openUpload('image', pageJson, 'integral')
                        : look
                    "
                    class="upload_wrap"
                    :style="{
                      background: `url(${pageJson.integralImgUrl}) no-repeat 50% 50%/cover`,
                    }"
                  >
                    <p class="updateImg">更换图片</p>
                  </div>
                  <div
                    v-else
                    class="upload_wrap uploadBox"
                    @click="
                      !readOnly
                        ? openUpload('image', pageJson, 'integral')
                        : look
                    "
                  >
                    <a-icon type="plus" />
                    <p>上传图片</p>
                  </div>
                </div>
                <div class="grow">
                  <a-radio-group
                    v-model="pageJson.integralType"
                    :disabled="readOnly"
                  >
                    <a-radio :style="radioStyle" :value="1"> 系统默认 </a-radio>
                    <a-radio
                      :style="[
                        radioStyle,
                        {
                          position: 'relative',
                        },
                      ]"
                      :value="2"
                    >
                      自定义
                      <div class="radiotext">建议宽度210px，高度210px</div>
                    </a-radio>
                  </a-radio-group>
                  <a-button type="primary" @click="start(3)">查看效果</a-button>
                </div>
              </div>
              <div class="flex mt20">
                <div class="label">
                  <span class="name">中奖名称字体颜色</span>
                  <span class="value">{{ pageJson.integralColor }}</span>
                </div>
                <div class="input color">
                  <span
                    class="input-btn"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'integralColor', '#ffffff')
                        : look
                    "
                    >重置</span
                  >
                  <a-input
                    type="color"
                    v-model="pageJson.integralColor"
                    :disabled="readOnly"
                  />
                </div>
              </div>
            </a-collapse-panel>
            <a-collapse-panel header="优惠券展示图">
              <div class="flex">
                <div
                  v-if="pageJson.couponType == 1"
                  class="blankUpbox"
                  :style="{
                    background: `url(${require('@/assets/images/product/choujiang_jiangpin_youhuiquan.png')})
                      no-repeat top center / cover`,
                  }"
                ></div>
                <div v-else>
                  <div
                    v-if="pageJson.couponImgUrl"
                    @click="
                      !readOnly ? openUpload('image', pageJson, 'coupon') : look
                    "
                    class="upload_wrap"
                    :style="{
                      background: `url(${pageJson.couponImgUrl}) no-repeat 50% 50%/cover`,
                    }"
                  >
                    <p class="updateImg">更换图片</p>
                  </div>
                  <div
                    v-else
                    class="upload_wrap uploadBox"
                    @click="
                      !readOnly ? openUpload('image', pageJson, 'coupon') : look
                    "
                  >
                    <a-icon type="plus" />
                    <p>上传图片</p>
                  </div>
                </div>
                <div class="grow">
                  <a-radio-group
                    v-model="pageJson.couponType"
                    :disabled="readOnly"
                  >
                    <a-radio :style="radioStyle" :value="1"> 系统默认 </a-radio>
                    <a-radio
                      :style="[
                        radioStyle,
                        {
                          position: 'relative',
                        },
                      ]"
                      :value="2"
                    >
                      自定义
                      <div class="radiotext">建议宽度210px，高度大于210px</div>
                    </a-radio>
                  </a-radio-group>
                  <a-button type="primary" @click="start(4)">查看效果</a-button>
                </div>
              </div>
              <div class="flex mt20">
                <div class="label">
                  <span class="name">中奖名称字体颜色</span>
                  <span class="value">{{ pageJson.couponColor }}</span>
                </div>
                <div class="input color">
                  <span
                    class="input-btn"
                    @click="
                      !readOnly
                        ? changeCheck(pageJson, 'couponColor', '#ffffff')
                        : look
                    "
                    >重置</span
                  >
                  <a-input
                    type="color"
                    v-model="pageJson.couponColor"
                    :disabled="readOnly"
                  />
                </div>
              </div>
            </a-collapse-panel>
            <a-collapse-panel header="分享样式">
              <div style="margin-bottom: 10px">海报图</div>
              <div class="flex">
                <div
                  v-if="pageJson.posterType == 1"
                  class="blankUpbox"
                  :style="{
                    background: `url(${require('@/assets/images/product/choujiang_xiaochengxufenxiang.png')})
                      no-repeat top center / cover`,
                  }"
                ></div>
                <div v-else>
                  <div
                    v-if="pageJson.posterImgUrl"
                    @click="
                      !readOnly ? openUpload('image', pageJson, 'poster') : look
                    "
                    class="upload_wrap"
                    :style="{
                      background: `url(${pageJson.posterImgUrl}) no-repeat 50% 50%/cover`,
                    }"
                  >
                    <p class="updateImg">更换图片</p>
                  </div>
                  <div
                    v-else
                    class="upload_wrap uploadBox"
                    @click="
                      !readOnly ? openUpload('image', pageJson, 'poster') : look
                    "
                  >
                    <a-icon type="plus" />
                    <p>上传图片</p>
                  </div>
                </div>
                <div class="grow">
                  <a-radio-group
                    v-model="pageJson.posterType"
                    :disabled="readOnly"
                  >
                    <a-radio :style="radioStyle" :value="1"> 系统默认 </a-radio>
                    <a-radio
                      :style="[
                        radioStyle,
                        {
                          position: 'relative',
                        },
                      ]"
                      :value="2"
                    >
                      自定义
                      <div class="radiotext">建议宽度500px，高度大于400px</div>
                    </a-radio>
                  </a-radio-group>
                  <!-- <a-button type="primary" @click="start(4)">查看效果</a-button> -->
                </div>
              </div>
              <div class="flex mt20">
                <span>文案</span>
                <div class="grow posi">
                  <a-input
                    v-model="pageJson.posterText"
                    placeholder="输入1-15字，不输入则不展示"
                    :max-length="15"
                    :disabled="readOnly"
                  />
                  <span class="limit"
                    >{{ pageJson.posterText.length || 0 }}/15</span
                  >
                </div>
              </div>
            </a-collapse-panel>
          </a-collapse>
        </div>
      </a-tab-pane>
    </a-tabs>
    <video-modal
      :visible="visibleModal"
      @cancel="closeInfoModal"
      :ContentType="ContentType"
      @upload="upload"
      :videoData="videoData"
    ></video-modal>
  </div>
</template>
<script>
import videoModal from "@/components/antBase/videoModal";
export default {
  name: "formPage",
  components: {
    videoModal,
  },
  props: {
    pageJson: {
      type: Object,
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      radioStyle: {
        display: "block",
        height: "30px",
        lineHeight: "30px",
      },
      setType: 1, //1 基础设置  2高级设置
      visibleModal: false,
      ContentType: "image",
      videoData: {},
      boxList: [
        { boxText: "盲盒1" },
        { boxText: "盲盒2" },
        { boxText: "盲盒3" },
        { boxText: "盲盒4" },
        { boxText: "盲盒5" },
        { boxText: "盲盒6" },
        { boxText: "盲盒7" },
        { boxText: "盲盒8" },
        { boxText: "盲盒9" },
      ], //盲盒文案
      uploadType: "",
    };
  },
  filters: {
    textThicknessFilter(n) {
      switch (n) {
        case "bold":
          return "加粗体";
        case "normal":
          return "常规体";
      }
    },
    angleTypeFilter(n) {
      switch (n) {
        case "0":
          return "直角";
        case "1":
          return "圆角";
      }
    },
  },
  methods: {
    // look() {
    //   console.log(this.pageJson);
    // },
    upload(val, index) {
      this.visibleModal = false;
      this.videoData = val;
      if (this.ContentType == "video") {
        // this.$set(this.formDataObject, "videoUrl", val.fileUrl);
        // this.$set(this.formDataObject, "imgUrl", val.video.coverPicture);
      } else {
        if (this.uploadType == "banner") {
          this.$set(this.pageJson, "bannerImageUrl", val.fileUrl);
        } else if (this.uploadType == "shareBtn") {
          this.$set(this.pageJson, "shareImageUrl", val.fileUrl);
        } else if (this.uploadType == "goshop") {
          this.$set(this.pageJson, "goShopImageUrl", val.fileUrl);
        } else if (this.uploadType == "box") {
          this.$set(this.pageJson, "BoxImgUrl", val.fileUrl);
        } else if (this.uploadType == "winningPrize") {
          this.$set(this.pageJson, "winningPrizeImgUrl", val.fileUrl);
        } else if (this.uploadType == "noWinning") {
          this.$set(this.pageJson, "noWinningImgUrl", val.fileUrl);
        } else if (this.uploadType == "integral") {
          this.$set(this.pageJson, "integralImgUrl", val.fileUrl);
        } else if (this.uploadType == "coupon") {
          this.$set(this.pageJson, "couponImgUrl", val.fileUrl);
        } else if (this.uploadType == "poster") {
          this.$set(this.pageJson, "posterImgUrl", val.fileUrl);
        }
      }
    },
    // 打开上传组件
    openUpload(a, item, type) {
      if (a == "video") {
        // this.checkValue = { videoUrl: item.videoUrl };
      } else {
        if (type == "banner") {
          this.uploadType = "banner";
          this.checkValue = { imgUrl: item.bannerImageUrl };
        } else if (type == "shareBtn") {
          this.uploadType = "shareBtn";
          this.checkValue = { imgUrl: item.shareImageUrl };
        } else if (type == "goshop") {
          this.uploadType = "goshop";
          this.checkValue = { imgUrl: item.goShopImageUrl };
        } else if (type == "box") {
          this.uploadType = "box";
          this.checkValue = { imgUrl: item.BoxImgUrl };
        } else if (type == "winningPrize") {
          this.uploadType = "winningPrize";
          this.checkValue = { imgUrl: item.winningPrizeImgUrl };
        } else if (type == "winningPrize") {
          this.uploadType = "winningPrize";
          this.checkValue = { imgUrl: item.winningPrizeImgUrl };
        } else if (type == "noWinning") {
          this.uploadType = "noWinning";
          this.checkValue = { imgUrl: item.noWinningImgUrl };
        } else if (type == "integral") {
          this.uploadType = "integral";
          this.checkValue = { imgUrl: item.integralImgUrl };
        } else if (type == "coupon") {
          this.uploadType = "coupon";
          this.checkValue = { imgUrl: item.couponImgUrl };
        } else if (type == "poster") {
          this.uploadType = "poster";
          this.checkValue = { imgUrl: item.posterImgUrl };
        }
      }
      this.ContentType = a;
      this.visibleModal = true;
    },
    closeInfoModal() {
      this.visibleModal = false;
    },
    changeCheck(index, key, val) {
      this.$set(this.pageJson, key, val);
    },
    start(type) {
      this.$emit("start", type);
    },
    look() {},
  },
};
</script>
<style scoped lang="less">
.formPage {
  width: 375px;
  height: calc(100vh - 109px);
  //   height: 100%;
  background: #fafafa;
  overflow-x: visible;
  overflow-y: scroll;
  //   overflow: auto;
  .title {
    line-height: 50px;
    font-size: 18px;
    font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
    font-weight: bold;
    color: #333333;
    padding-left: 16px;
    border-bottom: 1px solid #e8e8e8;
  }
  .setType,
  .styleType {
    padding: 10px 16px 5px;
    display: flex;
    margin-bottom: 17px;
    div {
      cursor: pointer;
      width: 50%;
      height: 36px;
      line-height: 36px;
      text-align: center;
      //   background: #e0edff;
      background: #fff;
      border-radius: 2px 0px 0px 2px;
      //   border: 1px solid #016bff;
      border: 1px solid #e6e6e6;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
    }
    .active {
      background: #e0edff;
      border: 1px solid #016bff;
      color: #016bff;
    }
  }
  .textTitle {
    padding: 0 16px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #999999;
    line-height: 20px;
  }
  .editor {
    padding: 0 5px;
  }
}
/deep/.ant-collapse-header {
  background: #e0edff;
  font-weight: 600;
  color: #333333;
  font-size: 14px;
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .right {
    flex-grow: 0.6;
  }
  .grow {
    flex-grow: 0.8;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.mt10 {
  margin-top: 15px;
}
.limitWords {
  position: absolute;
  right: 6px;
  bottom: 4px;
  font-size: 10px;
  color: #ccc;
}
.activety {
  position: relative;
  width: 100%;
  margin-top: 10px;
}
.activetyPatation {
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #cccccc;
  margin-left: 10px;
}
.uploadBox {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  p {
    text-align: center;
    font-size: 12px;
    margin-top: 4px;
  }
}
.upload_wrap {
  width: 60px;
  height: 60px;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  background: #fff;
  flex-shrink: 0;
  .updateImg {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    position: absolute;
    bottom: 0;
    text-align: center;
    white-space: nowrap;
    font-size: 12px;
  }
}
.upload_wrap:hover {
  border-color: skyblue;
}
.radiotext {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #cccccc;
  position: absolute;
  top: 19px;
  left: 28px;
}
.pad15 {
  padding: 15px;
  background: #fafafa;
  border-radius: 4px;
}
/deep/.ant-collapse-content > .ant-collapse-content-box {
  padding: 25px 16px;
}

.label {
  font-size: 14px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  .name {
    white-space: nowrap;
  }
  .value {
    margin-left: 14px;
    font-size: 10px;
    color: #999999;
    line-height: 22px;
  }
}
.input {
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .form-radio-btn {
    text-align: center;
    width: 50px;
    height: 32px;
    line-height: 32px;
    border: 1px solid #e6e6e6;
    &:hover {
      border-color: #016bff;
    }
  }
  .input-btn {
    margin: 0 10px;
    font-size: 14px;
    color: #999;
    cursor: pointer;
  }
  &.color .ant-input {
    width: 60px;
    padding: 1px;
    border-radius: 0;
  }
}
.iconfont {
  font-size: 22px;
  color: #e6e6e6;
}
.iconfont-check {
  color: #016bff;
  background: #e0edff;
  border-color: #016bff !important;
  .iconfont {
    color: #016bff;
  }
}
.blankUpbox {
  width: 60px;
  height: 60px;
}
/deep/.ant-tabs-tab {
  text-align: center;
  width: 50%;
}
/deep/.ant-tabs-nav {
  width: 100%;
}
/deep/.ant-tabs-nav .ant-tabs-tab {
  margin: 0 !important;
}
/deep/.ant-tabs-ink-bar {
  width: 50% !important;
}
.limit {
  position: absolute;
  right: 5px;
  top: 7px;
  font-size: 10px;
  color: #eee;
}
.posi {
  position: relative;
}
.mt20 {
  margin-top: 20px;
}
</style>